<div class="layui-form" lay-filter="layui-product-popup-list">
    <div class="img_content flex-col  center" style="margin-bottom: 50px;">
        <div>
            <script type="text/html" template>
                <img class="add-edit-img" src="{{d.params.img || layui.setter.base+'style/res/product.png'}}" alt=""  width="80" height="80" style="margin:15px 0;">
            </script>
        </div>
        <div>
            <button type="button" class="layui-btn layui-btn-primary layui-btn-sm load" style="overflow: hidden;"> 
                <i class="layui-icon layui-icon-upload-drag"></i>选择图标
                <input type="file" name="file" class="loadButton" id="file" onchange=con()>
            </button>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label required" >产品ID:</label>

            <div class="layui-input-inline">
              <input type="text" name="productCode" value="" required  lay-verify="required|Id" placeholder="请输入ID" autocomplete="off" class="layui-input">
            </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label required" >产品名称:</label>

            <div class="layui-input-inline">
              <input type="text" name="productName" value="" required  lay-verify="required|Id" placeholder="请输入标题" autocomplete="off" class="layui-input">
            </div>
    </div>

    <div class="layui-form-item">
            <div class="layui-input-block">
              <input type="button" value="确认" lay-submit class="layui-btn" lay-filter="LAY-productPopup-btn">
            </div>
            
    </div>


</div>

<style>
    .loadButton{
		position: absolute;
		z-index:2;
		margin-left: -15%;
		margin-top: 5px;
		opacity: 0;
        width: 90px;
	}
</style>

<script>
    layui.use(['form','admin', 'setter','upload','layer'], function () {
        var $ = layui.$,
        form = layui.form,
        admin = layui.admin,
        setter = layui.setter,
        upload = layui.upload,
        layer = layui.layer,
        productCode = "",
        productName = "",
        productId = '',
        formData = new FormData(),
        myFile = null;

        // 判断id输入是否合法
        form.verify({
            Id:[
                /^[a-zA-Z0-9]/
                ,'请填入字母或数字'
            ]
        })

        con = function(){
            var reads = new FileReader();
            f = document.getElementById('file').files[0];
            myFile = f;
            reads.readAsDataURL(f);
            reads.onload = function(e){
                $('.add-edit-img').attr('src',this.result)
            }
        }

        form.on('submit(LAY-productPopup-btn)',function(data){
            var filed = data.field
            formData.append('file',myFile);
            formData.append('productCode',filed.productCode);
            formData.append('productName',filed.productName);
            formData.append('token',layui.data(layui.setter.tableName).token);
            var url = 
        
        })


      });
</script>